<template>
  <view class="res">
    <view class="res-wrap">
      <image class="res-logo" :src="imgSrc" />
      <text class="res-text">{{ resText }}</text>
      <text class="res-text" v-if="status==2 && errorTips">{{ errorTips }}</text>
    </view>
    <view class="co-logo" @click="resubmit">
      <a-btn v-if="status==2" type="primary">重新提交</a-btn>
      <image class="co-logo-img" :src="'logo-txt.png'|prefixOssUrl" />
    </view>
  </view>
</template>

<script>
export default {
  components: {},
  mixins: [],
  props: {},
  data () {
    return {
      status: 0,
      errorTips: '提交信息有误，请重新提交！'
    }
  },
  computed: {
    resText () {
      let res = '支付认证审核中'
      if (this.status == 1) {
        res = '您已通过支付认证'
      } else if (this.status == 2) {
        res = '审核不通过'
      }
      return res
    },

    imgSrc () {
      let res = 'audit/auditing.png'
      if (this.status == 1) {
        res = 'audit/pass.png'
      } else if (this.status == 2) {
        res = 'audit/reject.png'
      }
      return this.prefixOssUrl(res)
    }
  },
  methods: {
    resubmit () {
      this.status++
      if (this.status > 2) {
        this.status = 0
      }
    }
  }
}
</script>

<style lang="less" scoped>
.res {
  .flexLayout(@dir:column,@a:center);
  min-height: 100vh;
  .res-wrap {
    .flexLayout(@dir:column,@a:center);
    flex: 1;
    .res-logo {
      margin-top: 260rpx;
      width: 240rpx;
      height: 240rpx;
    }
    .res-text {
      display: inline-block;
      font-size: 30rpx;
      font-weight: 500;
      color: #666;
      &:first-of-type {
        margin-top: 40rpx;
      }
    }
  }
  .co-logo {
    .flexLayout(@dir:column,@a:center);
    padding-bottom: 60rpx;
    width: 100%;
    text-align: center;
    /deep/ .axq-btn {
      margin-bottom: 74rpx;
      width: calc(100vw - 40rpx);
      height: 90rpx;
      line-height: 90rpx;
    }
    &-img {
      width: 250rpx;
      height: 31rpx;
    }
  }
}
</style>